<template>
	<view class="tree">
		<le-movable style="width: 100%;" :isH="true">
			<view class="imgBox">
				<image class="bgImg" :src="getImg(bgImg)" mode="widthFix"></image>
				<template v-for="(item,index) in treeData">
					<view @click="it.is_look==1?toSiha(it):''" class="item" v-for="(it,ind) in item.info_list" :style="{left:it.x_value/treeData[0].width/100+'%',top:it.y_value/treeData[0].height/100+'%',backgroundColor:it.is_look==1?'rgba(0,0,0,0)':'rgba(0,0,0,0.5)'}">
						<!-- <text>{{it.name}}</text> -->
					</view>
				</template>
			</view>
		</le-movable>
	</view>
</template>

<script>
	// import treeItem from '@/components/tree-item-h/tree-item-h.vue'
	export default {
		components: {
			// treeItem
		},
		data() {
			return {
				bgImg:"",
				treeData: [],
			};
		},
		mounted() {
			this.getEpisodeChapter()
		},
		methods: {
			toSiha(e){
				console.log(e)
				if(e.is_look){
					if(e.video_type==2){
						this.comLink('/pages/index/siha?id='+e.id)
					}else{
						this.comLink('/pages/index/siha2?id='+e.id)
					}
				}
			},
			// async getEpisodeInfoCharacter() {
			// 	const res = await this.$myRequest({
			// 		url: 'api/episode/getEpisodeInfoCharacter',
			// 		data: {
			// 			episode_info_id
			// 		}
			// 	})
			// 	if (res.code == 1) {
			// 		console.log(res)
			// 		this.treeData = res.data
			// 	}
			// },
			async getEpisodeChapter() {
				const res = await this.$myRequest({
					url: 'api/episode/getEpisodeChapter',
					data: {
						source: 1,
					}
				})
				if (res.code == 1) {
					console.log(res)
					this.treeData = res.data
					this.bgImg = res.data[0].branch_image
				}
			},
			tosiha(e){
				console.log(e)
				// this.comLink('/pages/index/siha')
			},
			// 返回上一页
			backPage() {
				uni.navigateBack({
					delta: 1
				})
			},
		}
	}
</script>

<style lang="less" scoped>
	.tree {
		// background: #000;
		width: 100%;
		height: 100vh;
		position: relative;
		overflow: hidden;
		background: linear-gradient(270deg, rgba(0, 0, 0, 0.7569) 0%, rgba(0, 0, 0, 0.6039) 82%, rgba(0, 0, 0, 0) 100%);
		// background: url("https://siha.vxmeng.com/static/bg.gif") center/cover;
		.imgBox{
			position: relative;
			transform: scale(4);
			// margin-top: 2700px;
			.bgImg{
				width: 100%;
			}
			.item{
				position: absolute;
				width: 31px;
				height: 15px;
				// border: 1px solid red;
				z-index: 101;
				top: 0;
				left: 0;
			}
		}
		.tree-content {
			min-height: calc(100vh - var(--status-bar-height) + 25px);
			// background: #000;
			position: absolute;
			top: calc(var(--status-bar-height) + 25px);
			left: 5%;
			transform-origin: 0% 0%;
			width: 100%;
			// transform: scale(0.5);
		}
	}
	.episodePop {
		width: 108px;
		// height: 300rpx;
		opacity: 1;
		position: fixed;
		z-index: 100000001;
		color: #D8D8D8;
		font-size: 14px;
		right: 0;
		bottom: 75px;
		display: flex;
		flex-direction: column;
		padding: 0 15px;
		box-sizing: border-box;
		align-items: flex-end;
		justify-content: center;
		.item{
			width: 100%;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			margin-top: 10px;
			background: rgba(77, 77, 77, 0.51);
			border-radius: 12px;
			padding: 10px;
			image{
				width: 24px;
			}
			
			&.xd{
				width: 170%;
				max-height: 150px;
				overflow: auto;
				.it{
					display: flex;
					align-items: center;
					image{
						width: 15px;
						margin: 0 10px;
					}
				}
			}
		}
		text {
			border-bottom: 1px solid #333333;
			padding: 5px 0;
	
			&:last-child {
				border: none;
			}
		}
	}
</style>